<template>
  <el-container class="el-container">
    <el-aside class="el-aside" :width="isCollapse ? '64px' : '260px'">
      <div class="aside-logo">
        <img src="@/assets/logo.png" />
        <span v-if="!isCollapse">{{ siteTitle }}</span>
      </div>
      <div class="ape-scroll">
        <el-menu
          class="el-menu"
          :collapse="isCollapse"
          :collapse-transition="false"
          :default-active="defaultActive"
          router
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="/index">
            <i class="iconfont icon-index"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="iconfont icon-tool"></i>
              <span slot="title">系统工具</span>
            </template>
            <el-menu-item index="/tool/buildForm">
              <template slot="title">
                <i class="iconfont icon-form"></i>
                <span slot="title">表单构建</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/tool/generateCode">
              <template slot="title">
                <i class="iconfont icon-code"></i>
                <span slot="title">代码生成</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/tool/buildDatabase">
              <template slot="title">
                <i class="iconfont icon-api"></i>
                <span slot="title">基础配置</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </el-aside>
    <el-container class="el-container">
      <el-header class="el-header">
        <div class="el-header-box">
          <div class="collapse-switch" @click="isCollapse = !isCollapse">
            <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
          </div>
          <div class="el-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">
                首页
              </el-breadcrumb-item>
              <el-breadcrumb-item
                v-for="(item, index) in breadcrumbs"
                :key="index"
              >
                {{ item.label }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="ape-fill"></div>
          <div class="headimg">
            <el-dropdown trigger="click" @command="abc">
              <span class="el-dropdown-link">
                <el-image
                  class="el-image"
                  src="http://img.duoziwang.com/2019/08/12181502586468.jpg"
                  fit="cover"
                ></el-image>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">个人中心</el-dropdown-item>
                <el-dropdown-item command="b" divided
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main class="el-main">
        <transition name="fade" mode="out-in">
          <router-view :key="key" />
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "LittleApeFrameworkIndex",

  data() {
    return {
      isCollapse: false,
      defaultActive: "/",
    };
  },

  computed: {
    // 获取面包屑数据
    breadcrumbs() {
      const routes = this.$route.matched;
      const breadcrumbs = [];
      routes.forEach((route, index) => {
        if (route.meta && route.meta.title && index > 0) {
          breadcrumbs.push({
            label: route.meta.title,
          });
        }
      });
      return breadcrumbs;
    },
    siteTitle() {
      let titles = document.title.split("-");
      if (titles.length > 1) return titles[titles.length - 1];
      return titles[0];
    },
    key() {
      return this.$route.path;
    },
  },

  watch: {
    // 监听路由变化
    $route() {
      this.defaultActive = this.$route.path;
    },
  },

  mounted() {
    this.defaultActive = this.$route.path;
  },

  methods: {
    abc(e) {
      console.log(222, e);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100vh;

  .el-aside {
    border-right: 1px solid #e6e6e6;
    transition: all 0.3s;
    overflow: hidden;

    .aside-logo {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      cursor: pointer;

      img {
        width: 26px;
        object-fit: cover;
      }

      span {
        margin-left: 5px;
        font-size: 18px;
        color: #313131;
        font-weight: bold;
        white-space: nowrap;
      }
    }

    .ape-scroll {
      width: 100%;
      height: calc(100% - 80px);
      overflow-x: hidden;
      overflow-y: auto;

      .el-menu {
        border: none;
        transition: all 0.3s;
      }
    }

    .ape-scroll::-webkit-scrollbar {
      width: 6px;
    }

    .ape-scroll::-webkit-scrollbar-thumb {
      background: #dbe2ef;
      border-radius: 3px;
    }

    .ape-scroll::-webkit-scrollbar-track {
      background: transparent;
    }
  }

  .el-header {
    padding-left: 0;
    border-bottom: 1px solid #e6e6e6;

    .el-header-box {
      width: 100%;
      height: 100%;
      display: flex;

      .collapse-switch {
        width: 60px;
        height: 60px;
        font-size: 20px;
        color: #313131;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.35s;
        cursor: pointer;
      }

      .collapse-switch:hover {
        background: #f0f5f9;
      }

      .el-breadcrumb {
        margin-left: 5px;
        width: fit-content;
        height: 100%;
        display: flex;
        align-items: center;
        user-select: none;
      }

      .headimg {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        cursor: pointer;

        .el-image {
          width: 40px;
          height: 40px;
          border-radius: 5px;
          overflow: hidden;
        }
      }
    }
  }

  .el-main {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .fade-enter-active {
      transition: all 0.5s;
    }
    .fade-leave-active {
      transition: all 0.5s;
    }

    .fade-enter {
      opacity: 0;
      transform: translateX(50px);
    }
    .fade-leave-to {
      opacity: 0;
      transform: translateX(-50px);
    }
  }
}
</style>
